<template>
    <div>
        <!-- 新闻列表 -->
        <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id">
					<router-link :to="'/home/newsinfo/'+item.id" class="">
						<img class="mui-media-object mui-pull-left" :src="item.pic">
						<div class="mui-media-body">
							{{ item.title}}
							<p class="mui-ellipsis">
                                <span>{{ item.add_time |dateFormat}}</span>
                                <span>{{ item.click}} 次</span>
                            </p>
						</div>
					</router-link>
				</li>
				

          




			</ul>
    </div>
</template>

<script>
// 弹窗
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      newslist: [
        {
          id: 1,
          title: "这是第一个新闻文章标题",
          desc: "这是第一个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 2,
          title: "这是第二个新闻文章标题",
          desc: "这是第而个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 3,
          title: "这是第三个新闻文章标题",
          desc: "这是第三个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 4,
          title: "这是第四个新闻文章标题",
          desc: "这是第四个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 5,
          title: "这是第五个新闻文章标题",
          desc: "这是第五个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 6,
          title: "这是第六个新闻文章标题",
          desc: "这是第六个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 7,
          title: "这是第七个新闻文章标题",
          desc: "这是第七个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 8,
          title: "这是第七个新闻文章标题",
          desc: "这是第七个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 9,
          title: "这是第七个新闻文章标题",
          desc: "这是第七个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 10,
          title: "这是第七个新闻文章标题",
          desc: "这是第七个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 11,
          title: "这是第七个新闻文章标题",
          desc: "这是第七个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 12,
          title: "这是第七个新闻文章标题",
          desc: "这是第七个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 13,
          title: "这是第七个新闻文章标题",
          desc: "这是第七个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 14,
          title: "这是第七个新闻文章标题",
          desc: "这是第七个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        },
        {
          id: 15,
          title: "这是第七个新闻文章标题",
          desc: "这是第七个新闻文章摘要",
          pic:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531476415423&di=53732dd2a52d27ba654d1d812be9d592&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F023b5bb5c9ea15ce66d72824bd003af33a87b2e6.jpg",
          add_time: "2018-07-11 12:15:23",
          click: 100
        }
      ]
    };
  },
  created() {
    this.getNewsList();
  },
  methods: {
    // 获取新闻列表
    getNewsList() {
      //              // 因为已经在main.js 中设置了请求的根路径，所以这里可以省略http://vue.studyit.io
      // this.$http.get('api/getnewslist').then(result=>{
      //     if(result.body.status === 0){
      //         Toast('加载完毕!')
      //         this.newslist = result.body.message;
      //     }else{
      //         // 状态码错误，失败后，返回
      //         Toast('加载新闻列表失败!')
      //     }
      // })

      if (this.newslist != "") {
        let instance = Toast({
          //message: "加载新闻列表成功!",
          duration: 1000,
          position: "middle"
        });
        setTimeout(() => {
          instance.close();
        }, 2000);
      } else {
        Toast("加载新闻列表失败!");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.mui-table-view {
  li {
    h1 {
      font-size: 14px;
    }
    .mui-ellipsis {
      font-size: 12px;
      color: #226aff;
      //设置 两端对齐
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>

